<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.JS常用指令的测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
<!--实现在body区域显示一个名称-->
<div id="app">

    <ul>
        <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0 ">{{index}}---{{item}}</li>
        <li v-for="(value,key) in user">{{key}}----{{value}}</li>
        <li v-for="(item,index) in userlist" :key="item.user.username">
            <div v-if="item.user.username =='test1'" style="background:#00f50c">
                {{index}}---{{item.user.username}}---{{item.user.age}}
            </div>
            <div v-else>
                {{index}}---{{item.user.username}}---{{item.user.age}}
            </div>


        </li>
    </ul>

</div>
</body>
<script>
    //编写MVVM中的model部分以及V(ViewModel)部分
    var VM = new Vue({
        el: '#app',//vm接管了app区域的管理
        data: {//model数据
            list: [1, 2, 3, 4, 5, 6],
            user: {username: 'test', age: 10},
            userlist:[
                { user: {username: 'test1', age: 11},},
                { user: {username: 'test2', age: 12},}
            ]
        }
    });
</script>
</html>